<template>
  <div class="container">
    <topTitle
      :titleText="titleText"
      :back="true"
      @gobackTriser="goBack"
    ></topTitle>
    <div class="mainCon">
      <div class="info complainInfo">
        <p class="secondaryTitle secondaryTitleTheme">
          {{ infoDetail.projectName }}
        </p>
        <div class="infoBox">
          <table cellspacing="0" cellpadding="0" class="detailTable">
            <tbody>
              <tr>
                <td class="title">反馈人姓名</td>
                <td>{{ infoDetail.reporter || '--' }}</td>
                <td class="title">反馈人联系电话</td>
                <td>{{ infoDetail.tel || '--' }}</td>
              </tr>
              <tr>
                <td class="title">问题类型</td>
                <td>{{ infoDetail.feedbackTypeName || '--' }}</td>
                <td class="title">紧急程度</td>
                <td>{{ infoDetail.anxiousTypeName || '--' }}</td>
              </tr>
              <tr>
                <td class="title">受理状态</td>
                <td>{{ infoDetail.statusName || '--' }}</td>
                <td class="title">附件</td>
                <td>
                  <el-link type="primary" @click="show()">查看</el-link>
                  <contractEnclosureDialog
                    v-if="uploadFilesDialog"
                    dialogTitle="问题反馈附件"
                    :tableData="files"
                    @closeDialog="uploadFilesDialog = false"
                  ></contractEnclosureDialog>
                </td>
              </tr>
              <tr>
                <td class="title">问题详情描述</td>
                <td colspan="3">
                  {{ infoDetail.description || '--' }}
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="spacing"></div>
      <div class="info progressInfo">
        <p class="secondaryTitle secondaryTitleTheme">问题处理进度</p>
        <!-- <div v-for="v in progressDetail" :key="v.id" class="progressBox">
                    <p>处理进度：{{v.statusName||'--'}}</p>
                    <p>处理时间：{{(v.createTime&&v.status!='PENDDING')?v.createTime:'--'}}</p>
                    <p>问题处理人：{{(v.creator&&v.status!='PENDDING')?v.creator:'--'}}</p>
                    <p>处理内容：{{v.content||'--'}}</p>
                </div> -->
        <el-button
          class="commonBut saveBtn funComBut"
          style="margin-top: 16px"
          icon="icon iconfont icontianjia"
          v-if="
            $store.state.userType === 'AREAMANAGE' &&
            infoDetail.status !== 'DONE'
          "
          @click="dialogVisible = true"
        >
          <span class="opetareText">添加处理</span>
        </el-button>
        <div class="infoList">
          <div>
            <el-steps direction="vertical" v-if="progressDetail.length > 0">
              <el-step
                v-for="item in progressDetail"
                :key="item.id"
                :title="`操作时间：${item.createTime}`"
              >
                <span slot="description">
                  <p>处理进度：{{ item.statusName || '--' }}</p>
                  <p>
                    问题处理人：{{
                      item.creator && item.status != 'PENDDING'
                        ? item.creator
                        : '--'
                    }}
                  </p>
                  <p>处理内容：{{ item.content || '--' }}</p>
                </span>
              </el-step>
            </el-steps>
            <span v-else class="noDataTip">暂无进展记录</span>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      title="问题处理"
      :visible="dialogVisible"
      @close="closeHandleDialog('ruleForm')"
      custom-class="dialog-minwidth"
      width="800px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :modal-append-to-body="false"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item
          label="处理进度："
          class="row-padding-bottom"
          prop="status"
        >
          <el-select
            v-model="ruleForm.status"
            filterable
            placeholder="请选择"
            clearable
          >
            <el-option
              v-for="item in calcStatusOptions"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            >
            </el-option>
          </el-select>
          <i class="el-icon-warning"></i>
          <span> 受理情况选择为已完成，即该问题处理结束，不能再进行操作。</span>
        </el-form-item>
        <el-form-item label="处理内容：" prop="content">
          <el-input
            type="textarea"
            :rows="3"
            :maxlength="500"
            placeholder="请输入"
            show-word-limit
            v-model="ruleForm.content"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="closeHandleDialog('ruleForm')" class="cancel"
          >取 消</el-button
        >
        <el-button
          type="primary"
          v-sdc
          class="save"
          @click.native="addHandle('ruleForm')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'feedbackDetail',
  data() {
    return {
      userType: '',
      titleText: '问题反馈详情',
      infoDetail: {},
      progressDetail: [],
      files: [],
      uploadFilesDialog: false,
      dialogVisible: false,
      ruleForm: {
        status: '',
        content: '',
      },
      rules: {
        status: {
          required: true,
          message: '请选择处理进度',
          trigger: 'change',
        },
      },
      statusOptions: [],
    }
  },
  mounted() {
    const { id } = this.$route.query
    this.getInfoDetail(id)
    this.getProgressDetail(id)
    this.getFileList(id)
    this.getOptions('FEEDBACK_STATUS', 'statusOptions')
  },
  computed: {
    calcStatusOptions() {
      if (this.infoDetail.status === 'PROCESSING') {
        return this.statusOptions.filter((v) => v.code != 'PENDDING')
      } else {
        return this.statusOptions
      }
    },
  },
  methods: {
    // 详情
    getInfoDetail(id) {
      return this.axios({
        method: 'post',
        url: 'api-m/feedback/detail',
        data: {
          id,
        },
      })
        .then((response) => {
          if (!response.data.hasError) {
            this.infoDetail = response.data.result
          } else {
            this.$message.error(response.data.errorMsg)
          }
        })
        .catch((error) => {
          if (error.response) {
            this.$message.error(error.response.data)
          }
        })
    },
    // 进度
    getProgressDetail(feedbackId) {
      return this.axios({
        method: 'post',
        url: 'api-m/feedback/log/list',
        data: {
          feedbackId,
        },
      })
        .then((response) => {
          if (!response.data.hasError) {
            this.progressDetail = response.data.result
          } else {
            this.$message.error(response.data.errorMsg)
          }
        })
        .catch((error) => {
          if (error.response) {
            this.$message.error(error.response.data)
          }
        })
    },
    // 附件
    getFileList(associatedId) {
      return this.axios({
        method: 'post',
        url: 'api-f/files/list',
        data: {
          associatedId,
          associatedName: 'T_SYS_HELP_FEEDBACK',
        },
      })
        .then((response) => {
          if (!response.data.hasError) {
            this.files = response.data.result
          } else {
            this.$message.error(response.data.errorMsg)
          }
        })
        .catch((error) => {
          if (error.response) {
            this.$message.error(error.response.data)
          }
        })
    },
    // 下拉字典ANXIOUS_TYPE紧急程度/FEEDBACK_TYPE问题类型/FEEDBACK_STATUS受理情况
    getOptions(type, typeOptions) {
      return this.axios({
        method: 'post',
        url: 'api-m/base/dicitem/findbytype',
        data: {
          type,
        },
      })
        .then((response) => {
          if (!response.data.hasError) {
            this[typeOptions] = response.data.result
          } else {
            this.$message.error(response.data.errorMsg)
          }
        })
        .catch((error) => {
          if (error.response) {
            this.$message.error(error.response.data)
          }
        })
    },
    closeHandleDialog(formName) {
      this.$refs[formName].resetFields()
      this.dialogVisible = false
    },
    addHandle(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.axios({
            method: 'post',
            url: 'api-m/feedback/log/deal',
            data: {
              feedbackId: this.$route.query.id,
              status: this.ruleForm.status,
              content: this.ruleForm.content,
            },
          })
            .then((response) => {
              if (!response.data.hasError) {
                this.$message.success(response.data.msg)
                this.closeHandleDialog('ruleForm')
                this.getInfoDetail(this.$route.query.id)
                this.getProgressDetail(this.$route.query.id)
              } else {
                this.$message.error(response.data.errorMsg)
              }
            })
            .catch((error) => {
              if (error.response) {
                this.$message.error(error.response.data)
              }
            })
        } else {
          this.isAdd = false
        }
      })
    },
    //返回
    goBack() {
      this.$router.push('/home/help/feedbackList')
      this.$store.commit('GOBACK_NAME', {
        oldUrl: '/home/help/feedbackList',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    show() {
      this.uploadFilesDialog = true
    },
  },
}
</script>

<style lang="less" scoped>
.container {
  .mainCon {
    height: calc(100% - 67px);
    background: #fff;
    overflow-y: auto;
    padding: 0;
    .info {
      padding: 24px;

      .infoBox {
        // padding: 0 24px;
        padding-top: 24px;
        .elrow {
          margin-top: 30px;
          line-height: 20px;
          .infoTitle {
            display: inline-block;
            width: 140px;
            text-align: right;
          }
          .infoDesc {
            display: inline-block;
            width: calc(100% - 145px);
            vertical-align: top;
          }
        }
      }
      .progressBox {
        margin-top: 20px;
        padding: 20px 24px;
        background-color: #f0f0f0;
        p {
          line-height: 28px;
        }
      }
    }
    .progressInfo {
      min-height: 200px;
      .addProblem {
        margin-top: 20px;
      }
    }
  }
}
.el-icon-warning {
  font-size: 18px;
  color: #ffaa00;
  margin-left: 5px;
  position: relative;
  top: 2px;
}
.infoList {
  background-color: #f8f9fb;
  padding: 20px;
  margin-top: 16px;
}
// 修改步骤条样式
/deep/ .el-steps {
  .el-step__icon.is-text {
    border: none;
    background-color: #eee;
    border-radius: 50%;
    width: 10px;
    height: 10px;
  }
  .el-step__icon-inner {
    display: none;
  }
  .el-step__line {
    background-color: #eee;
    left: 4px !important;
    top: 9px !important;
    bottom: -8px !important;
  }
  .el-step__title {
    font-size: 12px;
    color: #999;
  }
  .el-step__description {
    margin-bottom: 15px;
    font-size: 14px;
    color: #444;
  }
}
</style>
